<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>个人理财系统</title>
    <!-- 引入bootstrap样式 -->
    <link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">
    <!--图标库-->
    <link th:href="@{/lyear/css/materialdesignicons.min.css}" rel="stylesheet" type="text/css"/>
    <!--弹出框样式-->
    <link th:href="@{/lyear/jconfirm/jquery-confirm.min.css}" rel="stylesheet" type="text/css"/>
    <!--自定义样式-->
    <link th:href="@{/lyear/css/style.min.css}" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <div th:replace="user/common/leftbar::#leftbaraside"></div>
        <!--头部信息-->
        <div th:replace="user/common/topbar::#topbarheader"></div>

        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h4>银行卡管理</h4>
                            </div>
                        </div>
                    </div>

                    <div th:if="${!bankCardList.isEmpty()}" th:each="bankcard:${bankCardList}">
                        <div class="col-sm-12">
                            <div class="card">
                                <div class="card-header bg-primary">
                                    <div th:if="${bankcard.default==1}">
                                    <h4 th:if="${bankcard.type==1}" th:text="${bankcard.cardbank+' (借记卡)(默认)'}"></h4>
                                    <h4 th:if="${bankcard.type==2}" th:text="${bankcard.cardbank+' (信用卡)(默认)'}"></h4>
                                </div>
                                    <div th:if="${bankcard.default==0}">
                                        <h4 th:if="${bankcard.type==1}" th:text="${bankcard.cardbank+' (借记卡)'}"></h4>
                                        <h4 th:if="${bankcard.type==2}" th:text="${bankcard.cardbank+' (信用卡)'}"></h4>
                                    </div>
                                    <ul class="card-actions">
                                        <li>
                                            <button class="btn btn-primary update_btn"
                                                    th:attr="update-id=${bankcard.id}">
															<span class="glyphicon glyphicon-pencil"
                                                                  aria-hidden="true"></span> 编辑
                                            </button>
                                            <button class="btn btn-danger delete_btn"
                                                    th:attr="delete-id=${bankcard.id},delete-name=${bankcard.cardnum}">
															<span class="glyphicon glyphicon-trash"
                                                                  aria-hidden="true"></span> 删除
                                            </button>
                                            <button th:if="${bankcard.default==0}" class="btn default_btn"
                                                    th:attr="default-id=${bankcard.id}">
															<span class="glyphicon "
                                                                  aria-hidden="true"></span> 设为默认
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                                <div class="card-body">
                                    <h4 th:text="'卡号：'+${bankcard.cardnum}"></h4>
                                    <h4 th:text="'账户余额：'+${bankcard.balance}+'元'"></h4>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div th:if="${bankCardList.isEmpty()}" class="card">
                        <div class="col-sm-12">
                            <div class="card">
                                <div class="card-body">
                                    <h4>很抱歉！您还没有添加银行卡</h4>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 新增按钮 -->
                    <div class="row">
                        <div class="col-md-1" style="margin-left: 24px">
                            <button id="bankCard_add_modal_btn" class="btn btn-primary">新增</button>
                        </div>
                    </div>

                    <!-- 新增银行卡的模态框 -->
                    <div class="modal fade" id="bankCardAddModal" tabindex="-1"
                         role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"
                                            aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    <h4 class="modal-title">新增银行卡</h4>
                                </div>
                                <div class="modal-body">
                                    <!--要提交的表单 -->
                                    <form class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">银行：</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                       id="cardBank_add_input" name="cardbank"
                                                       placeholder="银行卡所属银行：">
                                                <span class="help-block"></span>
                                            </div>
                                            <div class="col-sm-1">
                                                <em style="color: red">*</em>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">类别：</label>
                                            <div class="col-sm-6">
                                                <div class="example-box">
                                                    <label class="lyear-radio radio-inline"> <input
                                                            type="radio" name="type"
                                                            value="1" checked="checked"><span>借记卡</span>
                                                    </label> <label class="lyear-radio radio-inline"> <input
                                                        type="radio" name="type"
                                                        value="2"> <span>信用卡</span>
                                                </label>
                                                </div>
                                            </div>
                                            <div class="col-sm-1">
                                                <em style="color: red">*</em>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">卡号：</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="cardNum_add_input"
                                                       name="cardnum" placeholder="请输入银行卡号：">
                                                <span class="help-block"></span>
                                            </div>
                                            <div class="col-sm-1">
                                                <em style="color: red">*</em>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default"
                                            data-dismiss="modal">关闭
                                    </button>
                                    <button type="button" class="btn btn-primary"
                                            id="bankCard_save_btn">保存
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 修改银行卡的模态框 -->
                    <div class="modal fade" id="bankCardUpdateModal" tabindex="-1"
                         role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"
                                            aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    <h4 class="modal-title">修改银行卡信息</h4>
                                </div>
                                <div class="modal-body">
                                    <!--要提交的表单 -->
                                    <form class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">银行：</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                       id="cardBank_update_input" name="cardbank"
                                                       placeholder="银行卡所属银行：">
                                                <span class="help-block"></span>
                                            </div>
                                            <div class="col-sm-1">
                                                <em style="color: red">*</em>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">类别：</label>
                                            <div class="col-sm-6">
                                                <div class="example-box">
                                                    <label class="lyear-radio radio-inline"> <input
                                                            type="radio" name="type"
                                                            value="1" checked="checked"><span>借记卡</span>
                                                    </label> <label class="lyear-radio radio-inline"> <input
                                                        type="radio" name="type"
                                                        value="2"> <span>信用卡</span>
                                                </label>
                                                </div>
                                            </div>
                                            <div class="col-sm-1">
                                                <em style="color: red">*</em>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">卡号：</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="cardNum_update_input"
                                                       name="cardnum" placeholder="请输入银行卡号：">
                                                <span class="help-block"></span>
                                            </div>
                                            <div class="col-sm-1">
                                                <em style="color: red">*</em>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default"
                                            data-dismiss="modal">关闭
                                    </button>
                                    <button type="button" class="btn btn-primary"
                                            id="bankCard_update_btn">更新
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<!-- 引入jQuery和bootstrap的js -->
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.js}"></script>
<!--滚动条插件-->
<script th:src="@{/lyear/js/perfect-scrollbar.min.js}"></script>
<!--弹出框js-->
<script th:src="@{/lyear/jconfirm/jquery-confirm.min.js}"></script>
<!--自定义js脚本-->
<script th:src="@{/lyear/js/main.min.js}"></script>
<script type="text/javascript">

    $(document).on("click",".default_btn",function (){
        var id = $(this).attr("default-id");
          $.ajax({
              url:"/user/personal/toBankCardDefault.html/"+id,
              type:"POST",
              success:function (result){
                  if (result.code === 100) {
                      var url = result.extend.url;
                      //alert(url);
                      location.href = url;
                  } else {
                      $.alert("设置失败");
                  }
              }
              })
    })
    //点击新增按钮弹出模态框。
    $("#bankCard_add_modal_btn").click(function () {
        //清除表单数据（表单完整重置（表单的数据，表单的样式））
        reset_form("#bankCardAddModal form");
        //弹出模态框
        $("#bankCardAddModal").modal({
            //点击增加框背景不删除增加框
            backdrop: "static"
        });
    });

    //点击保存，保存新增银行卡信息。
    $("#bankCard_save_btn").click(function () {
        var cardBank = $("#cardBank_add_input").val();
        var cardNum = $("#cardNum_add_input").val();
        //alert(cardNum);

        //匹配汉字
        var cardBankRegex = /^[\u4e00-\u9fa5]{0,}$/;
        if (cardBank === "") {
            show_validate_msg("#cardBank_add_input",
                "error", "银行名称为空");
            return false;
        } else if (cardBankRegex.test(cardBank) === false) {
            show_validate_msg("#cardBank_add_input",
                "error", "银行名称不合法");
            return false;
        }

        //匹配16-19位的数字
        var cardNumRegex = /^\d{16,19}$/;
        if (cardNum === "") {
            show_validate_msg("#cardNum_add_input",
                "error", "银行卡号为空");
            return false;
        } else if (cardNumRegex.test(cardNum) === false) {
            show_validate_msg("#cardNum_add_input",
                "error", "银行卡号不合法");
            return false;
        }

        //2、发送ajax请求保存银行卡
        $.ajax({
            url: "/user/addBankCard",
            type: "POST",
            data: $("#bankCardAddModal form").serialize(),
            success: function (result) {
                if (result.code === 100) {
                    //新增银行卡保存成功；
                    //1、关闭模态框
                    $("#bankCardAddModal").modal('hide');
                    //2、弹出成功提示框,并刷新当前界面
                    $.alert('银行卡新增成功！');
                    setTimeout(function () {
                        location.href = "/user/personal/toBankCard.html";
                    }, 1000);
                } else {
                    $.alert('银行卡新增失败！');
                }
            }
        });
    });

    //点击编辑按钮时触发事件
    $(document).on("click", ".update_btn", function () {

        //根据银行卡id发送ajax请求，查出银行卡信息并显示
        getBankCard($(this).attr("update-id"));

        //把银行卡的id传递给模态框的更新按钮
        $("#bankCard_update_btn").attr("update-id", $(this).attr("update-id"));
        $("#bankCardUpdateModal").modal({
            backdrop: "static"
        });
    });

    //根据id查出银行卡信息并显示
    function getBankCard(id) {
        $.ajax({
            url: "/user/getBankCardById/" + id,
            type: "GET",
            success: function (result) {
                var bankcard = result.extend.bankcard;
                //alert(updateDept.dDeptname);
                //显示数据之前先清除一下校验样式，如果有的话
                $(cardBank_update_input).parent().removeClass(
                    "has-success has-error");
                $(cardBank_update_input).next("span").text("");
                $("#cardBank_update_input").val(bankcard.cardbank);

                $(cardNum_update_input).parent().removeClass(
                    "has-success has-error");
                $(cardNum_update_input).next("span").text("");
                $("#cardNum_update_input").val(bankcard.cardnum);

                $("#bankCardUpdateModal input[name=type]").val(
                    [bankcard.type]);
            }
        });
    }

    //点击更新，更新银行卡信息
    $("#bankCard_update_btn").click(function () {

        var cardBank = $("#cardBank_update_input").val();
        var cardNum = $("#cardNum_update_input").val();

        //匹配汉字
        var cardBankRegex = /^[\u4e00-\u9fa5]{0,}$/;
        if (cardBank === "") {
            show_validate_msg("#cardBank_update_input",
                "error", "银行名称为空");
            return false;
        } else if (cardBankRegex.test(cardBank) === false) {
            show_validate_msg("#cardBank_update_input",
                "error", "银行名称不合法");
            return false;
        }

        //匹配16-19位的数字
        var cardNumRegex = /^\d{16,19}$/;
        if (cardNum === "") {
            show_validate_msg("#cardNum_update_input",
                "error", "银行卡号为空");
            return false;
        } else if (cardNumRegex.test(cardNum) === false) {
            show_validate_msg("#cardNum_update_input",
                "error", "银行卡号不合法");
            return false;
        }

        //2、发送ajax请求保存更新的员银行卡数据
        $.ajax({
            url: "/user/updateBankCard/" + $(this).attr("update-id"),
            type: "PUT",
            data: {
                "cardbank": cardBank,
                "type": $("#bankCardUpdateModal input:radio:checked").val(),
                "cardnum": cardNum
            },
            success: function (result) {
                if (result.code === 100) {
                    $("#bankCardUpdateModal").modal('hide');
                    $.alert('银行卡信息修改成功！');
                    setTimeout(function () {
                        location.href = "/user/personal/toBankCard.html";
                    }, 1000);
                } else {
                    $.alert('银行卡信息修改失败！');
                }
            }
        });
    });

    //单个删除
    $(document).on("click", ".delete_btn", function () {
        //1、弹出是否确认删除对话框
        var id = $(this).attr("delete-id");
        var cardnum = $(this).attr("delete-name");
        $.alert({
            title: '提示：',
            content: "确定删除 <strong>" + cardnum + "</strong> 吗？",
            buttons: {
                confirm: {
                    text: '确认',
                    btnClass: 'btn-primary',
                    action: function () {
                        $.ajax({
                            url: "/user/deleteBankCard/" + id,
                            type: "DELETE",
                            success: function (result) {
                                if (result.code === 100) {
                                    $.alert('删除该银行卡成功！');
                                    setTimeout(function () {
                                        location.href = "/user/personal/toBankCard.html";
                                    }, 1000);
                                } else {
                                    $.alert('删除该银行卡失败!');
                                }
                            }
                        });

                    }
                },
                cancel: {
                    text: '取消',
                    action: function () {
                        $.alert('已取消!');
                    }
                }
            }
        });

    });

    //清空表单样式及内容
    function reset_form(ele) {
        $(ele)[0].reset();
        //清空表单样式
        $(ele).find("*").removeClass("has-error has-success");
        $(ele).find(".help-block").text("");
    }

    //显示校验结果的提示信息
    function show_validate_msg(ele, status, msg) {
        //清除当前元素的校验状态
        $(ele).parent().removeClass("has-success has-error");
        $(ele).next("span").text("");
        if ("success" === status) {
            $(ele).parent().addClass("has-success");
            $(ele).next("span").text(msg);
        } else if ("error" === status) {
            $(ele).parent().addClass("has-error");
            $(ele).next("span").text(msg);
        }
    }

</script>
</body>
</html>
